<template>
  <z-publicFrame>
    <template v-slot:header>
      <el-button-group class="buttong">
        <el-button @click.native="handleAdd" type="primary" icon="el-icon-plus">添加</el-button>
        <el-button @click.native="handlePatchDelete" type="danger" icon="el-icon-delete">删除</el-button>
        <el-button @click.native="handleSearch" type="warning" icon="el-icon-search">搜索</el-button>
      </el-button-group>
      <div class="search-form">
        <el-form size="mini" :inline="true" :model="search" class="demo-form-inline">
          <ZForm v-for="(item, index) in searchView" :key="index" :form="item" v-model="search[item.model]"></ZForm>
        </el-form>
      </div>
    </template>
    <template v-slot:container>

      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
        stripe
        >
        <el-table-column
          type="selection"
          >
        </el-table-column>
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
          <el-table-column
            v-for="(item, index) in tables"
            :key="index"

          :prop="item.prop"
          :label="item.label"
          >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                @click.native.prevent="handleEdit(scope.row.code)"
                type="primary" icon="el-icon-edit"
                size="mini"
              ></el-button>
              <el-button
                @click.native.prevent="handleDelete(scope.row.code)"
                type="danger" icon="el-icon-delete"
                size="mini"
              ></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </template>
  </z-publicFrame>
</template>

<script>
import PublicFrame from '../../components/CrudTempalte/PublicFrame'
const tables = [
  { prop: 'name', label: '服务器名称' },
  { prop: 'flag', label: '服务器标识' },
  { prop: 'status', label: '状态' }
]
const searchView = [
  {
    type: 'text',
    model: 'name',
    label: '服务器名称'
  },
  {
    type: 'text',
    model: 'flag',
    label: '服务器标识'
  }
]

function init() {
  let search = {}
  for (let i = 0; i < searchView.length; i++) {
    search[searchView[i].model] = ''
  }

  return { search }
}
const { search } = init()
export default {
  name: 'List',
  components: {
    'z-publicFrame': PublicFrame
  },
  data() {
    return {
      api: {
        list: this.$api.fileServer.list,
        add: this.$api.fileServer.add,
        delete: this.$api.fileServer.delete,
        edit: this.$api.fileServer.edit,
        batchDelete: this.$api.fileServer.batchDelete
      },
      delete: {
        codes: []
      },
      search,
      tableData: [],
      page: {
        current: 1,
        total: 2,
        size: 10
      },
      searchView,
      tables
    }
  },
  methods: {
    handleSelectionChange(v) {
      this.delete.codes = v.map(e => e.code)
    },
    handleAdd() {
      const hashs = document.location.hash.split('/')
      hashs[hashs.length - 1] = 'add'
      hashs[0] = ''
      const path = hashs.join('/')
      this.$router.push(path)
    },
    async handlePatchDelete() {
      if (this.delete.codes.length === 0) {
        this.$error('请选择你要删除的记录!')
        return
      }
      const data = await this.$http.post(this.api.batchDelete, this.delete.codes)
      if (!data) {
        return
      }
      if (data.data.status === 200) {
        this.handleList()
        this.$success(data.data.message)
      }
    },
    handleSearch() {
      this.handleList()
    },
    handleSizeChange(val) {
      this.page.size = val
      this.handleList()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.handleList()
    },
    async handleList() {
      const pram = {}
      pram.current = this.page['current']
      pram.size = this.page['size']
      this.$httpTemplate({ url: this.api.list, paras: this.$qs.stringify(this.search) + '&' + this.$qs.stringify(pram) }, data => {
        for (let para in data.data.data) {
          if (data.data.data[para] instanceof Array) {
            this.tableData = data.data.data[para]
            return
          }
        }
        this.handlePage(data.data.data.page)
      })
    },
    handleDelete(code) {
      this.$httpTemplate({ url: this.api.delete, paras: { code: code } }, data => this.handleList())
    },
    handleEdit(code) {
      const hashs = document.location.hash.split('/')
      hashs[hashs.length - 1] = 'edit'
      hashs[0] = ''
      const path = hashs.join('/')
      this.$router.push({ path: path,
        query: {
          code: code
        } })
    },
    handlePage(page) {
      this.page.current = page.current
      this.page.total = page.total
    }

  },
  created() {
    this.handleList()
  }
}
</script>

<style lang="less" scoped>
  .container{
    height: 100%;
    margin-left: 40px;
    .el-table {
      margin-top: 30px;
    }
  }
  .buttong {
    margin: 10px 0;
  }
  .el-pagination {
    padding: 20px 40px;
    padding-left: 100px;
  }
</style>
